<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<title>管理首页</title>
	<meta charset="utf-8"/>
	<meta https-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta https-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1"/>

	<link rel="stylesheet" href="../../static/asset/css/base.min.css" th:href="@{/asset/css/base.min.css}">
	<link rel="stylesheet" href="../../static/asset/css/common/back.css" th:href="@{/asset/css/common/back.css}">
	<link rel="stylesheet" href="../../static/asset/css/back/index-base.css" th:href="@{/asset/css/back/index-base.css}">
	<link rel="stylesheet" href="../../static/asset/css/back/index.css" th:href="@{/asset/css/back/index.css}">
</head>
<!--
sidebar-left-fixed: 固定左侧导航
sidebar-right-fixed: 固定右侧导航
sidebar-top-fixed: 固定顶部导航
sidebar-bottom-fixed: 固定底部导航

sidebar-left-mini: 左侧导航mini版
-->
<body class="full-height-layout sidebar-left-fixed sidebar-right-fixed sidebar-top-fixed sidebar-left-mini">
<!--页面包装-->

<div class="wrapper">

	<!--左侧导航-->
	<div class="sidebar sidebar-left">
		<div class="inner-container">
			<ul class="nav flex-column metismenu" data-url="/test.html">
				<li class="nav-item nav-header">
					<div class="dropdown profile-element">
						<img alt="image" class="rounded-circle img-fluid" data-toggle="dropdown"
							 style="width:50px; height:50px;"
							 src="../../static/asset/img/~default_TmtUser_avatar.jpg" th:src="@{${#authentication.principal.avatar}}"/>

						<a class=" profile-info" data-toggle="dropdown" href="#" title="跳转到用户信息，用户密码修改等等">
						<span class="clear">
							<span class="d-block m-t-xs"><strong class="font-bold" sec:authentication="principal.username">登录用户</strong></span>
							<span class="text-xs d-block dropdown-toggle" th:text="${#authentication.principal.userType}">超级管理员</span>
						</span>
						</a>
						<div class="dropdown-menu">
							<a href="#" class="dropdown-item">个人信息</a>
							<a href="#" class="dropdown-item">邮箱</a>
							<div class="dropdown-divider"></div>
							<a href="#" th:href="@{/logout}" class="dropdown-item" th:text="#{user.logout}">登出</a>
						</div>
					</div>
					<div class="logo-element">
						<img alt="image" class="rounded-circle img-fluid" src="../../static/asset/img/brand-logo.svg" style="width: 40px;" th:src="@{/asset/img/brand-logo.svg}"/>
					</div>
				</li>

				<li class="nav-item">
					<a class="nav-link" aria-expanded="true" href="board.html" th:href="@{/admin/board}" data-dismiss="false">
						<i class="fa fa-home"></i>
						<span>概览</span>
					</a>
				</li>

				<div th:replace="layout/menu_item::submenu(${menus},0)"></div>
			</ul>
		</div>
		<!--<div class="sidebar sidebar-bottom text-right bg-danger" style="position: absolute;bottom: 40px; width:100%;">页底</div>-->
	</div>

	<!--顶部导航-->
	<nav class="sidebar sidebar-top d-flex justify-content-between">
		<div class="d-inline-flex justify-content-start align-items-center">
			<a class="sidebar-left-toggler btn btn-outline-success ml-3 mr-2">&#9776;</a>

			<!--TODO: 自定义顶部边栏的内容-->
			<div class="h5 m-0">
				<a id="home" href="index.html" th:href="@{/admin}" class="text-white" th:text="#{admin.title}">管理后台</a>
			</div>
		</div>

		<!--TODO: 完善不同情况下显示的菜单，以及是否显示文字信息等等-->
		<ul class="nav mr-0 mr-sm-2 mr-md-4">
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle px-3 h-100 d-flex align-items-center" data-toggle="dropdown">
					<i class="fa fa-bell"></i>
					<span class="d-none d-sm-inline-block">通知</span>
				</a>
				<div class="dropdown-menu dropdown-menu-right">
					<a class="dropdown-item" href="#">全部通知</a>
					<a class="dropdown-item" href="#">未读通知</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">清空提示</a>
				</div>
			</li>

			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle px-3 h-100 d-flex align-items-center" data-toggle="dropdown">
					<i class="fa fa-cog"></i>
					<span class="d-none d-sm-inline-block">设置</span>
				</a>
				<div class="dropdown-menu dropdown-menu-right">
					<a class="dropdown-item" href="#">个人设置</a>
					<a class="dropdown-item" href="#">消息设置</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">系统设置</a>
				</div>
			</li>

			<li class="nav-item">
				<a class="nav-link px-3 h-100 d-flex align-items-center text-white" href="#" th:href="@{/logout}">
					<i class="fa fa-sign-out"></i>
					<span class="d-none d-sm-inline-block" th:text="#{user.logout}">登出</span>
				</a>
			</li>
		</ul>
	</nav>

	<div class="main-content-wrapper" onselectstart="return false;">
		<div class="tab-list-wrapper d-sm-flex justify-content-between d-none">
			<a class="tab-action tab-action-left d-block" data-tab-action="left" title="向后翻页">
				<i class="fa fa-backward"></i>
			</a>

			<div class="tab-list-container">
				<nav class="tab-list">
				</nav>
			</div>

			<div class="d-flex justify-content-end">
				<a class="tab-action tab-action-right" data-tab-action="right" title="向前翻页">
					<i class="fa fa-forward"></i>
				</a>
				<a class="tab-action tab-action-refresh" data-tab-action="refresh" title="刷新当前页">
					<i class="fa fa-refresh"></i>
				</a>
				<div class=" dropdown">
					<a class="nav-link tab-action dropdown-toggle px-3 d-flex align-items-center" data-toggle="dropdown">
						<i class="fa fa-close"></i>
						<span class="d-none d-lg-inline-block">关闭操作</span>
					</a>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item tabs-action-current" data-tab-action="active" href="#">定位当前选项卡</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item tabs-action-close-current" data-tab-action="close-current" href="#">关闭<b>当前</b>选项卡</a>
						<a class="dropdown-item tabs-action-close-other" data-tab-action="close-other" href="#">关闭<b>其他</b>选项卡</a>
						<a class="dropdown-item tabs-action-close-all" data-tab-action="close-all" href="#">关闭<b>全部</b>选项卡</a>
					</div>
				</div>
			</div>
		</div>

		<!--页面主体-->
		<div class="tab-panel-container">

		</div>

	</div>


</div>


<script type="text/javascript" src="../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
<script type="text/javascript" src="../../static/asset/js/back/index-base.js" th:src="@{/asset/js/back/index-base.js}"></script>
<script type="text/javascript" src="../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>
<script type="text/javascript" src="../../static/asset/js/common/dynamic-tab.js" th:src="@{/asset/js/common/dynamic-tab.js}"></script>
<script type="text/javascript" src="../../static/asset/js/back/index.js" th:src="@{/asset/js/back/index.js}"></script>
<script>
	$(function () {

		function smoothMenu() {
			if ($('body').hasClass('sidebar-left-mini')) {
				if ($('body').hasClass('sidebar-left-fixed')) {
					$('.metismenu').hide().fadeIn();
				} else {
					$('.metismenu').removeAttr("style")
				}
			} else {
				$('.metismenu').hide().fadeIn();
			}
		}

		$('.metismenu').metisMenu();
		$('.inner-container').slimScroll({height: '100%'});

		var threshold = 768;
		var tab = $('.tab-list-wrapper').dynamicTab({tabOpener: '.metismenu a.nav-link[href]:not([href^="javascript:"])'});
		tab.openTabByTag('.metismenu a.nav-link[href]:not([href^="javascript:"]):first');

		$('.sidebar-left .nav-item').on('click', function () {
			if ($('body').hasClass('sidebar-left-mini')) {
				console.log('.sidebar-left .nav-item');
				$('body').removeClass('sidebar-left-mini');
				smoothMenu();
				return false;
			}
		});

		$('.sidebar-left-toggler').on('click', function () {
			$('body').toggleClass('sidebar-left-mini');
			smoothMenu();
		});

		$('.sidebar-left > .nav > li a[href]').on('click', function () {
			if ($(window).width() < threshold) {
				$('body').addClass('sidebar-left-mini');
			}
		});

		if ($(window).width() >= threshold) {
			$('body').removeClass('sidebar-left-mini');
			smoothMenu();
		} else {
			$('body').addClass('sidebar-left-mini');
		}
		$(window).on('resize', function () {
			if ($(window).width() < threshold) {
				if (!$('body').hasClass('sidebar-left-mini')) {
					$('body').addClass('sidebar-left-mini');
				}
			}
		});
	});
</script>

</body>
</html>